<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片试图区 -->
        <el-card>
            <!-- 头部警告区域 -->
            <el-alert show-icon title="注意：只允许选中和设置三级分类！！！" type="warning" :closable="false"> </el-alert>
            
            <!-- 选择商品分类区域 -->
            <el-row class="cat_opt">
                <el-col>
                    <span>选择商品分类：</span>
                    <el-cascader v-model="SelectedValue" :options="paramsList"
                    :props="{ expandTrigger: 'hover',value: 'cat_id', label: 'cat_name'}"
                    @change="handleChange"></el-cascader>
                </el-col>            
            </el-row>

            <!-- 选中商品要修改的属性 -->
            <el-tabs v-model="activeName" @tab-click="handleChange">
                <el-tab-pane label="动态参数" name="many">
                    <!-- 添加参数的按钮 -->
                    <el-button type="primary" :disabled="isdisapply" @click="addMany">添加参数</el-button>
                    <!-- 动态参数表格 -->
                    <el-table :data="setCateInfo" border style="width: 100%"> 
                        <!-- 展开行 -->
                        <el-table-column type="expand"  label="+">
                            <template slot-scope="scope">
                                <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i"
                                closable>{{item}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column class="index" type="index" label="#"></el-table-column>
                        <el-table-column prop="attr_name" label="参数名称"  > </el-table-column>                        
                        <el-table-column label="操作"  >
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit">修改</el-button>                              
                                <el-button type="danger" icon="el-icon-delete">删除</el-button>                              
                            </template>    
                        </el-table-column>                        
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="静态属性" name="only">
                     <!-- 添加属性的按钮 -->
                    <el-button type="primary" :disabled="isdisapply" @click="addOnly">添加属性</el-button>
                     <!-- 静态属性表格 -->
                    <el-table :data="setCateInfo" border style="width: 100%"> 
                        <el-table-column type="expand"  label="+"></el-table-column>
                        <el-table-column class="index" type="index" label="#"></el-table-column>
                        <el-table-column prop="attr_name" label="参数名称"  > </el-table-column>                        
                        <el-table-column label="操作"  >
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit">修改</el-button>                              
                                <el-button type="danger" icon="el-icon-delete">删除</el-button>                              
                            </template>    
                        </el-table-column>    
                    </el-table>  
                </el-tab-pane>            
            </el-tabs>


            <!-- 参数的详细信息 -->
            <el-row>
                <el-col></el-col>
            </el-row>

           
        </el-card>  

        <!-- 添加参数配置 -->
        <el-dialog title="提示" :visible.sync="dialogVisible"
        width="50%" @close="beforeHandleClose">
        <!-- 添加参数对话框 -->
        <el-form  :model="addFrom" :rules="addFromRules"
        ref="addFromRef" label-width="150px">
            <el-form-item :label="addInfoType" prop="attr_name"> 
                <el-input v-model="addFrom.attr_name"></el-input>
            </el-form-item>
        </el-form>
        <!-- 
        <span>{{addInfoType}}:
            <el-input v-model="addCateInfo" placeholder="请输入内容"></el-input>
        </span> -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data(){
        return{
            //商品列表数据
            paramsList: [],
            //被选中的数据
            SelectedValue: '',
            //被激活的标签的名称
            activeName: 'many',
            //是否隐藏添加属性
            isdisapply: 'true',
            //被修改的商品属性
            setCateInfo: [],
            //添加窗口控制值
            dialogVisible: false,
            //添加参数/配置类型
            addInfoType: '',
            //添加的信息内容
            addCateInfo: '',
            //添加参数的表单数据对象
            addFrom: {
                attr_name: ''
            },
            //添加表单的验证规则
            addFromRules: {
                attr_name:[
                    {required: true, message: '请输入参数名称', trigger: 'blur'}
                ]
            }

        }
    },
    created(){
        //获取所有的商品列表数据
        this.getParamsList()
    },
    methods: {
        //获取商品列表数据
        async getParamsList(){
            const {data:res} = await
            this.$http.get('categories')            

            if(res.meta.status!==200){
                return this.$message.error('获取商品列表数据失败');                
            }

            this.paramsList=res.data
            console.log(this.paramsList)
        },
        //级联选择框选择项改变事件
        async handleChange(){
            console.log(this.SelectedValue)
            if(this.SelectedValue.length!==3){
                this.isdisapply=true
            }else{
                this.isdisapply=false
            }
            console.log(99)
            //根据所选分类的id，和当前所处的面板，获取相应的数据
            const {data:res} = await
            this.$http.get(`categories/${this.cateId}/attributes`,{ params: {sel : this.activeName} })
            
            if(res.meta.status!==200){
                return this.$message.error('查询商品参数失败！请确认正确选择了商品')
            }

            console.log(122)
            console.log(res.data)

            res.data.forEach(item => {
                item.attr_vals = item.attr_vals.split(' ')
            });
            this.setCateInfo=res.data
        },
        //被激活的点击事件
        handlTabeClick(){

        },
        //添加动态参数
        addMany(){
            this.addInfoType='添加动态参数';
            this.dialogVisible = true
        },
        //添加静态属性
        addOnly(){
            this.addInfoType='添加静态属性'
            this.dialogVisible = true
        },       
        //弹出窗关闭之前
        beforeHandleClose(){
            this.$refs.addFromRef.resetFields()
        } 
    },
    computed: {
        //当前选中的三级分类的id
        cateId(){
            if(this.SelectedValue.length===3){
                return this.SelectedValue[2]
            }
            return null;
        },
        //获取动态only或者静态many
    }

}
</script>

<style lang="less" scope="">
.cat_opt{
    margin-top: 15px;
}

.border{
    width: 200px;
}

.el-tag{
    margin: 10px;
}
</style>